<template>
    <div class="index-container">
        <v-breadcrumb :breadcrumbData="[{name: '促销活动管理'}, {name: '活动详情'}]"></v-breadcrumb>

        <div class="g-box">
            <div class="table">
                <table class="width100 vd-table">
                    <tbody>
                    <tr>
                        <td style="width:130px">活动类型</td>
                        <td>
                            <el-select v-model="addobj.type" placeholder="请选择商品分类" class="width-400">
                                <el-option v-for="(item,index) in promotionTypes" :key="item.id"
                                           :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </td>
                    </tr>

                    <tr class="c-pointer" @click="showPromotionDrawer">
                        <td>商品</td>
                        <td>
                            <el-input v-if="!oneGoods" placeholder="请选择商品" :value="addobj.goods_name"
                                      class="width-400"/>
                            <div v-if="oneGoods" class="flex-center flex-start">
                                <el-image style="width:60px;height:60px;border-radius:5px;" fit="cover"
                                          :src="oneGoods.image"></el-image>
                                <div class="ml-10">
                                    <div class="t-hidden" style="max-width:350px;">{{oneGoods.name}}</div>
                                    <div class="mt-10 color-666">零售价：{{oneGoods.price}}元</div>
                                </div>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td>活动优惠价</td>
                        <td>
                            <el-input placeholder="请填写排序" v-model="addobj.promotion_price" class="width-400"/>
                            <span class="ml-5">元</span>
                        </td>
                    </tr>

                    <tr>
                        <td>活动时间</td>
                        <td>
                            <el-date-picker value-format="timestamp" style="width:400px;"
                                            v-model="times" type="datetimerange"
                                            start-placeholder="开始日期" end-placeholder="结束日期"
                                            :default-time="['12:00:00','12:00:00']">
                            </el-date-picker>
                        </td>
                    </tr>

                    <tr>
                        <td>销量限额</td>
                        <td>
                            <el-input placeholder="请填写销量限额" v-model="addobj.sale_limit" class="width-400"/>
                            <span class="ml-5">不填写或填写0，表示不限额</span>
                        </td>
                    </tr>

                    <tr>
                        <td style="width:130px">是否指定合伙人</td>
                        <td>
                            <el-select v-model="addobj.is_partner" class="width-400">
                                <el-option label="指定" :value="1"></el-option>
                                <el-option label="不指定" :value="2"></el-option>
                            </el-select>
                        </td>
                    </tr>

                    <tr class="c-pointer" @click="showUserDrawer" v-if="addobj.is_partner==1">
                        <td>合伙人</td>
                        <td>
                            <el-input v-if="!oneUser" placeholder="请选择合伙人" :value="addobj.goods_name"
                                      class="width-400"/>
                            <div v-if="oneUser" class="flex-center flex-start">
                                <el-image style="width:60px;height:60px;border-radius:5px;" fit="cover"
                                          :src="oneUser.image"></el-image>
                                <div class="ml-10">
                                    <div class="t-hidden" style="max-width:350px;">微信昵称：{{oneUser.nickname}}</div>
                                    <div class="mt-10 color-666">真实姓名：{{oneUser.real_name||'无'}}</div>
                                </div>
                            </div>
                        </td>
                    </tr>

                    <tr v-if="addobj.is_partner==1">
                        <td>合伙人佣金比例</td>
                        <td>
                            <el-input placeholder="请填写合伙人佣金比例" v-model="addobj.partner_commission_percentage"
                                      class="width-400"/>
                            <span class="ml-5">%</span>
                        </td>
                    </tr>

                    <tr>
                        <td>排序</td>
                        <td>
                            <el-input placeholder="请填写排序值" v-model="addobj.sort" class="width-400"/>
                        </td>
                    </tr>

                    <tr>
                        <td>微信分享标题</td>
                        <td>
                            <el-input placeholder="请填写" v-model="addobj.share_title" class="width-400"/>
                        </td>
                    </tr>

                    <tr>
                        <td>微信分享图片</td>
                        <td>
                            <div>
                                <v-upload-image :fromData="addobj.share_image"
                                                @toData="uploadShareImage"></v-upload-image>
                                <el-alert class="mt-10" title="图片长宽比：5比4；建议尺寸：375像素 × 300像素"
                                          type="info"></el-alert>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td>微信海报背景图</td>
                        <td>
                            <div>
                                <v-upload-image :fromData="addobj.share_bg" @toData="uploadShareBg"></v-upload-image>
                                <el-alert class="mt-10" title="建议尺寸：750像素 × 750像素" type="warning"></el-alert>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td></td>
                        <td>
                            <el-button v-preventDbClick @click="submit()" type="primary" class="width-100">保存
                            </el-button>
                            <el-button v-preventDbClick @click="saveAndPush" type="warning">保存并上架</el-button>
                        </td>
                    </tr>

                    </tbody>
                </table>

            </div>
        </div>

        <v-promotion-goods-drawer ref="goodsDrawer" @toData="selectGoods"></v-promotion-goods-drawer>
        <v-promotion-user-drawer ref="userDrawer" @toData="selectUser"></v-promotion-user-drawer>

    </div>
</template>

<script type="text/ecmascript-6">
import request from '../../common/js/request.js';
import {tool} from "../../common/js/tool.js";
import config from '../../common/js/config.js'

export default {
    data() {
        return {
            id: 0,
            oneGoods: '',
            oneUser: '',
            promotionTypes: config.promotionTypes,
            times: [],
            addobj: {
                type: 1,
                goods_id: '',
                start_time: '',
                end_time: '',
                sale_limit: '',
                is_partner: 1,
                partner_user_id: '',
                partner_commission_percentage: '',
                promotion_price: '',
                sort: '',
                share_bg: '',
                share_image: '',
                share_title: ''
            }
        };
    },

    computed: {},

    mounted() {
        this.id = this.$route.query.id ? this.$route.query.id : 0;
        if (this.id) {
            this.getData();
        }
    },

    created() {
    },

    methods: {
        saveAndPush() {
            this.submit((id) => {
                request({
                    url: '/manage/promotion/start',
                    data: {id: id}
                }).then((res) => {
                    tool.message('操作成功', 'success', () => {
                        this.$router.push({path: "/promotion/list"});
                    })
                })
            })
        },
        submit(callback) {
            if (!this.times || this.times.length == 0) {
                return tool.message('请选择活动时间', 'error');
            }
            let addobj = Object.assign({}, this.addobj);
            addobj.start_time = this.times[0] / 1000;
            addobj.end_time = this.times[1] / 1000;
            console.log(addobj);
            if (this.id) {
                addobj.id = this.id;
                request({
                    url: '/manage/promotion/edit',
                    data: addobj
                }).then((res) => {
                    if (callback) {
                        callback(this.id);
                    } else {
                        tool.message('操作成功', 'success', () => {
                            this.$router.push({path: "/promotion/list"});
                        })
                    }
                })
            } else {
                request({
                    url: '/manage/promotion/add',
                    data: addobj
                }).then((res) => {
                    if (callback) {
                        callback(res.data);
                    } else {
                        tool.message('操作成功', 'success', () => {
                            this.$router.push({path: "/promotion/list"});
                        })
                    }
                })
            }
        },
        showUserDrawer() {
            this.$refs.userDrawer.show();
        },
        selectUser(a) {
            this.addobj.partner_user_id = a;
            this.getOneUser();
        },
        getOneUser() {
            request({
                url: '/manage/user/one',
                data: {id: this.addobj.partner_user_id}
            }).then((res) => {
                this.oneUser = res.data;
            })
        },
        showPromotionDrawer() {
            this.$refs.goodsDrawer.show();
        },
        selectGoods(a) {
            this.addobj.goods_id = a;
            this.getOneGoods();
        },
        getOneGoods() {
            request({
                url: '/manage/goods/one',
                data: {id: this.addobj.goods_id}
            }).then((res) => {
                this.oneGoods = res.data;
            })
        },

        getData() {
            request({
                url: '/manage/promotion/one',
                data: {id: this.id}
            }).then((res) => {
                this.addobj.goods_id = res.data.goods_id;
                this.addobj.share_title = res.data.share_title;
                this.addobj.share_image = res.data.share_image;
                this.addobj.share_bg = res.data.share_bg;
                this.getOneGoods();
                this.addobj.sale_limit = res.data.sale_limit;
                this.addobj.is_partner = res.data.is_partner;
                this.addobj.partner_user_id = res.data.partner_user_id;
                if (this.addobj.partner_user_id) {
                    this.getOneUser();
                }
                this.addobj.partner_commission_percentage = res.data.partner_commission_percentage;
                this.addobj.promotion_price = res.data.promotion_price;
                this.addobj.sort = res.data.sort;
                this.addobj.type = res.data.type;
                this.times = [res.data.start_time * 1000, res.data.end_time * 1000];
            })
        },

        uploadShareBg(a) {
            this.addobj.share_bg = a;
        },
        uploadShareImage(a) {
            this.addobj.share_image = a;
        }

    },

};
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import url("../../common/css/variable.less");
</style>

